<template>
  <div class="beginner-page">
    <div class="page-header">
      <h1>第一题</h1>
      <ol class="description-list">
        <li>完成一个投票小demo,票数从高到低排序,有重置功能</li>
        <li>阅读代码后1️⃣添加注释  2️⃣修复bug  3️⃣实现功能</li>
      </ol>
    </div>
    
    <div class="content-section">
      <div>
    <h2>你最喜欢哪种水果？</h2>

    <ul>
      <!-- TODO: 补充注释 : 解释代码的作用-->
      <!-- 遍历所有水果，显示水果名称和票数 -->
      <li v-for="item in fruits" :key="item.name">
        {{ item.name }} - {{ item.votes }} 票
        <!-- TODO: 补充注释 -->
         <!-- 投票按钮：为当前投票的水果投票，点击click事件对应水果票数加一 -->
        <button @click="vote(item)">投票</button>
      </li>
    </ul>

    <!-- TODO: 重置票数按钮：点击后将所有票数重置为 0 -->
     <button @click="clear">重置票数</button>
  </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'BeginnerPage',
  data() {
    return {
      fruits: [
        { name: '苹果', votes: 2 },
        { name: '香蕉', votes: 1 },
        { name: '橘子', votes: 3 }
      ]
    };
  },
  methods: {
    vote(item) {
      // TODO: 补充注释
      item.votes=item.votes+1;
      this.sortFruits();
    },
    sortFruits() {
      // TODO: 补充注释
      // 为水果数组排序
      this.fruits.sort((a, b) =>{a.votes<b.votes});
    },


    // TODO: 在此添加"重置票数"函数，并添加注释
    clear(){
      for(let i=0;i<this.fruits.length;i++)
    {
      this.fruits[i].votes=0
    }
    }
  }
};
</script>

<style scoped>
.beginner-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 2rem;
  text-align: center;
}

.page-header h1 {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.description-list {
  color: #7f8c8d;
  font-size: 1.1rem;
  text-align: left;
  padding-left: 2rem;
  margin: 1rem auto;
  max-width: 600px;
}

.description-list li {
  margin-bottom: 0.5rem;
}

.content-section {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  min-height: 400px;
  transition: all 0.3s ease;
}

/* 水果投票应用样式 */
.content-section h2 {
  color: #3498db;
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 0.8rem;
}

.content-section h2:after {
  content: '';
  position: absolute;
  width: 80px;
  height: 3px;
  background-color: #3498db;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.content-section ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.content-section li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 1.5rem;
  margin-bottom: 1rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  font-size: 1.1rem;
}

.content-section li:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.content-section button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.content-section button:hover {
  background-color: #45a049;
  transform: scale(1.05);
}
</style> 